import React from 'react'
// ===================================================================== Temp
import ATable from './a-table'
import BTable from './b-table'
import Chart from './chart'
import FormModal from '#cpt/temp/FormModal'
// ===================================================================== global declare
const { $Lazy, $http } = window
// ===================================================================== Lazy
const Button 			= $Lazy.load(()=>import('@antd/button'))
const RecordModal 		= $Lazy.state(()=>import('./record-modal'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		index: 0,
		data: {},
		formData:[
			{ label: '设定日期',	names: ['start', 'end'], name: 'jz-time', type: 'date-range', full:true, required:true, format: 1 }
		]
	}

	componentDidMount(){
		this.fetch()
	}
	
	fetch = () => {
		const { uuid } = this.props.thisRef.cRow
		this.uuid = uuid
		$http.pull(this,'qc-test/info', {param: {uuid}, pullLoading: 'pagingLoading'}).then(() => {
			this['ref0'] && this['ref0'].init()
			this['ref1'] && this['ref1'].init()
			this.chartRef && this.chartRef.init()
		})
	}

	btn = () => {
		const { index, data: {result_type} } = this.state
		return <div className='fxm nowrap'>
			{ (!index && result_type === '1') ? <Button label='设定靶值' className='ml10' onClick={() => this.modal.open({ formRef:this.formRef })} /> : null }
			{ (!index && result_type === '1') ? <Button label='靶值记录' className='ml10' onClick={() => this.recordModalRef.refs.ref.open(this.uuid)} /> : null }
		</div>
	}
	
	render(){
		const { data, index } = this.state
		return <>
			<div className='r5px ptb5 pl5 pr5' style={{backgroundColor: '#E9EFF0'}}>
				<div className='fx'>
					<div style={{width: '20%'}}>
						<span className='b' style={{width: 70}}>测试：</span>
						<span>{data?.analyte_name}</span>
					</div>
					<div style={{width: '20%'}}>
						<span className='b' style={{width: 70}}>有效期：</span>
						<span>{data?.expiration_date}</span>
					</div>
					<div style={{width: '20%'}}>
						<span className='b' style={{width: 70}}>结果类型：</span>
						<span>{data?.result_type === '1' ? '数值' : '定性'}</span>
					</div>
				</div>
			</div>
			<div className='fxmj mtb5 plr5'>
				<div className='fx'>
					<span className='cp mr10' style={index === 0 ? {color: '#208FA0', fontWeight: 700, borderBottom: '2px solid #208FA0'} : {}} onClick={() => this.setState({index: 0})}>点数据</span>
					<span className='cp' style={index === 1 ? {color: '#208FA0', fontWeight: 700, borderBottom: '2px solid #208FA0'} : {}} onClick={() => this.setState({index: 1})}>汇总数据</span>
				</div>
				{ this.btn() }
			</div>
			<div className='fx ex'>
				{ index === 0 ? <ATable ref={ref => this['ref0'] = ref} chartRef={this.chartRef} data={data} {...this.props} /> : '' } 
				{ index === 1 ?	<BTable ref={ref => this['ref1'] = ref} chartRef={this.chartRef} data={data} {...this.props} /> : '' }
			</div>
			<Chart ref={ref => this.chartRef = ref} thisRef={this.props.thisRef} />
			{ FormModal.call(this,{ title:'手动设定靶值', onSubmit: ({'jz-time': [start, end]}) => $http.submit(null, 'qc-test/avg', {param: {start, end, test_id: this.uuid} }).then(() => {
				this.modal.close()
				this.fetch()
			} ) }) }
			<RecordModal ref={ref => this.recordModalRef = ref} />
		</>
	}
}

export default Index